<!DOCTYPE html>
<html>
  <head>
    <title>ystep流程、步骤插件 —— Powerd By YangYuan</title>
    <meta name="keywords" content="ystep,jQuery流程、步骤插件"/>
    <meta name="description" content="ystep,jQuery流程、步骤插件"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入ystep样式 -->
    <link rel="stylesheet" href="css/ystep.css">
  </head>
  <body>
  
  <br><br><br><br><br>
  <!-- ystep容器 -->
  <div class="ystep1"></div>
  
  <br><br><br><br><br>
  
  <div class="ystep2"></div>
  
  <br><br><br><br><br>
  
  <div class="ystep3"></div>
  
  <br><br><br><br><br>
  
  <div class="ystep4"></div>
  
  <!-- 引入jquery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入ystep插件 -->
  <script src="js/ystep.js"></script>
  <script>
    //根据jQuery选择器找到需要加载ystep的容器
    //loadStep 方法可以初始化ystep
    $(".ystep1").loadStep({
      //ystep的外观大小
      //可选值：small,large
      size: "small",
      //ystep配色方案
      //可选值：green,blue
      color: "green",
      //ystep中包含的步骤
      steps: [{
        //步骤名称
        title: "发起",
        //步骤内容(鼠标移动到本步骤节点时，会提示该内容)
        content: "实名用户/公益组织发起项目"
      },{
        title: "审核",
        content: "乐捐平台工作人员审核项目"
      },{
        title: "募款",
        content: "乐捐项目上线接受公众募款"
      },{
        title: "执行",
        content: "项目执行者线下开展救护行动"
      },{
        title: "结项",
        content: "项目执行者公示善款使用报告"
      }]
    });

    $(".ystep2").loadStep({
      size: "large",
      color: "green",
      steps: [{
        title: "发起",
        content: "实名用户/公益组织发起项目"
      },{
        title: "审核",
        content: "乐捐平台工作人员审核项目"
      },{
        title: "募款",
        content: "乐捐项目上线接受公众募款"
      },{
        title: "执行",
        content: "项目执行者线下开展救护行动"
      },{
        title: "结项",
        content: "项目执行者公示善款使用报告"
      }]
    });
    
    $(".ystep3").loadStep({
      size: "small",
      color: "blue",
      steps: [{
        title: "发起",
        content: "实名用户/公益组织发起项目"
      },{
        title: "审核",
        content: "乐捐平台工作人员审核项目"
      },{
        title: "募款",
        content: "乐捐项目上线接受公众募款"
      },{
        title: "执行",
        content: "项目执行者线下开展救护行动"
      },{
        title: "结项",
        content: "项目执行者公示善款使用报告"
      }]
    });
    
    $(".ystep4").loadStep({
      size: "large",
      color: "blue",
      steps: [{
        title: "发起",
        content: "实名用户/公益组织发起项目"
      },{
        title: "审核",
        content: "乐捐平台工作人员审核项目"
      },{
        title: "募款",
        content: "乐捐项目上线接受公众募款"
      },{
        title: "执行",
        content: "项目执行者线下开展救护行动"
      },{
        title: "结项",
        content: "项目执行者公示善款使用报告"
      }]
    });
    
    $(".ystep1").setStep(2);
    $(".ystep2").setStep(5);
    $(".ystep3").setStep(3);
    
  </script>
  </body>
</html>